<template>
  <div class="vue-table" :style="{height: `${elTableH}px`}">
    <div class="table-container" ref="tableContainer">
      <div class="table-header">
        <div class="table-header__tr">
          <table-column
            v-for="(column, index) in columns"
            :key="index"
            :field="column.dataIndex"
            :width="column.width"
            :type="column.type"
            :dictCode="column.dictCode"
            :sortable="column.sorter"
            @changeColumnWidth="handleChangeColumnWidth"
            @changeSort="handleChangeSort"
            @setLine="handleSetMoveLine"
            @columnFilter="handleColumnFilter"
          >{{column.title}}</table-column>
        </div>
      </div>
      <div class="table-content" :style="{height: `calc(100% - 30px)`}">
        <div class="table-body">
          <div class="table-body__tr" v-for="(item, index) in data" :key="index">
            <table-cell
              v-for="(column, key) in columns"
              :key="`${column.dataIndex}-${key}`"
              :width="column.width">
              <template v-if="column.scopedSlots">
                <slot :name="column.scopedSlots.customRender" :text="item[column.dataIndex]" :record="item"></slot>
              </template>
              <template v-else>{{item[column.dataIndex]}}</template>
            </table-cell>
          </div>
        </div>
      </div>
      <div class="slider-move__line" v-if="showLine" :style="{left: `${lineLeft}px`}"></div>
    </div>
    <div class="tabel-pagination" v-if="pagination">
      <!-- 分页 -->
      <!-- <a-pagination
        size="small"
        :total="pagination.total"
        :pageSize="pagination.pageSize"
        :show-size-changer="pagination.showSizeChanger"
        :show-quick-jumper="pagination.showQuickJumper"
        :pageSizeOptions="pagination.pageSizeOptions"
        @change="handlePaginationChange"
        @showSizeChange="handlePageSizeChange"
        /> -->
    </div>
    <div class="loading"></div>
  </div>
</template>

<script>
  import TableColumn from './TableColumn'
  import TableCell from './TableCell'

  export default {
    name: 'VueTable',
    components: {
      TableColumn,
      TableCell,
    },
    props: {
      columns: {
        type: Array,
        default: () => [],
        required: true
      },
      data: {
        type: Array,
        default: () => [],
        required: true
      },
      limitHeightNum: {
        type: Number,
        default: 0
      },
      pagination: {
        type: Object,
      }
    },
    data() {
      return {
        elTableH: 0,
        showLine: false,
        lineLeft: 0,
      }
    },
    methods: {
      // 列筛选事件
      handleColumnFilter(data) {
        this.$emit('onTableFilter', data, 'and')
      },
      // 改变顺序事件
      handleChangeSort(field, sort) {
        console.log(field, sort)
      },
      // 显示移动线条
      handleSetMoveLine(boo, lineLeft) {
        this.showLine = boo;
        // 纠偏：减去表格滚动条左侧隐藏的长度
        this.lineLeft = lineLeft - this.$refs.tableContainer.scrollLeft
      },
      // 列宽度改变
      handleChangeColumnWidth(field, width) {
        let findIndex = this.columns.findIndex(item => item.dataIndex == field)
        if(findIndex > -1) {
          let column = this.columns[findIndex];
          column.width = width;
          this.columns.splice(findIndex, 1, column)
        }
      },
      getJournalEntryTableY() {
        this.elTableH = window.innerHeight - this.limitHeightNum
      }
    },
    beforeMount() {
      window.onresize = this.getJournalEntryTableY()
    },
    beforeDestroy() {
      window.onresize = null;
    },
    mounted() {
      this.getJournalEntryTableY()
    },
  }
</script>

<style>
  .vue-table {
    position: relative;
  }
  .table-container {
    border: 1px solid #ccc;
    font-size: 14px;
    height: 100%;
    /* position: relative; */
    overflow-y: auto;
  }

  .table-header {
    display: flex;
    position: sticky;
    top: 0;
  }
  .table-header__tr {
    /* position: absolute; */
    left: 0;
    top: 0;
  }
  .table-header__tr {
    display: flex;
    height: 30px;
    background: linear-gradient(180deg,#f9f9f9 0,#efefef);
    border-bottom: 1px solid #ccc;
  }

  .table-body {
    display: flex;
    flex-wrap: wrap;
  }
  .table-body__tr {
    display: flex;
    align-items: stretch;
    border-bottom: 1px dotted #ccc;
    height: 24px;
  }
  .table-body__tr:hover {
    background: #f2f2f2;
  }

  .loading {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ddd;
    opacity: 0.5;
  }
  .slider-move__line {
    position: absolute;
    height: calc(100% - 15px);
    width: 1px;
    background: #0099ff;
    top: 0;
  }
</style>